<template>

  <a-modal v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width" :ok-text="LAYER.okText"
           :align-center="LAYER.alignCenter" :top="LAYER.top"
           :closable="LAYER.closable" :unmount-on-close="LAYER.unmountOnClose"
           :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose" :ok-loading="LAYER.okLoading"
           :on-before-ok="onSubmit" @cancel="onClose()">

    <a-form ref="formRef" :model="formState" auto-label-width layout="vertical">

      <a-form-item label="请选择要同步的公众号" field="appId" :rules="[{required:true,message:'请选择要同步的公众号'}]">
        <smart-dict v-model="formState.appId" :url="WxmpOptions.AccountOptions"/>
      </a-form-item>

    </a-form>
  </a-modal>

</template>
<script lang="ts" setup>

import {reactive, ref} from "vue";
import {LocalModal} from "@/libs/core";
import {WxmpOptions} from '@/libs/options'
import {WxmpHttp} from '../resource/http'
import {MsgUtil} from "@/utils";

const emit = defineEmits(['cancel'])

const formRef = ref(null)
const formState = reactive({
  appId: null
})

const service = new LocalModal(emit).setMD('同步标签', '开始同步', 500)
const {LAYER, lockMd, unLockMd} = service

const onClose = (data = 'NONE') => {
  LAYER.visible = false
  emit('cancel', data)
}
const onSubmit = async () => {
  try {
    const err = await formRef.value.validate();
    if (err !== undefined) return false
    lockMd()
    const {code, message} = await WxmpHttp.syncWxmpTags(formState.appId)
    if (code === 0) {
      MsgUtil.notify('操作成功', message, 'success')
      onClose('RELOAD')
    } else MsgUtil.notify('操作失败', message, 'error')

  } finally {
    unLockMd()
  }


}
</script>

